import React, { Component } from 'react'
import './Radio.scss'
import PropTypes from 'prop-types'
export default class Radio extends Component {
    constructor(props) {
        super(props)
        this.state={
            activeIndex:0
        }
    }
  
    //   切换方法
    toogleChange(index){
		// console.log(index)
        this.setState({
            activeIndex:index
        },()=>{ // 异步执行之后的状态
            console.log(this.props.arr[this.state.activeIndex].id)
        })
    }
    render() {
        let arr = this.props.arr.map((item,index)=>{
            return (
                <p key={index} id={index} style={{ background: this.state.activeIndex === index?"red":"" }} onClick={()=>{
                    this.toogleChange(index)
                }}>
                    {item.value}
                </p>   
            )
        })
        return (
            <>
                <div className='list'>
                    {arr}
                </div>
            </>
        
        )
    }
}

